html{
    perspective: 800px;
    /* width: 100%;
    height: 100%; */
    background-color: #fff;
    min-width: 800px;
}

html:hover{
    animation: colors 7s infinite;
}

@keyframes colors{
    0%{
        background-color: red;
    }

    16.6%{
        background-color: orange;
    }

    33.2%{
        background-color: yellow;
    }

    49.8%{
        background-color: green;
    }

    66.4%{
        background-color: cyan;
    }

    83.3%{
        background-color: indigo;
    }

    100%{
        background-color: purple;
    }
}

a{
    text-decoration: none;
    color: brown;
    font-size: 14px;
}

a:hover{
    color:blue;
}

.box1{
    width: 300px;
    height: 300px;
    /* display: none; */
    margin: 150px auto;
    background-color: burlywood;
    
    box-shadow: 10px 10px rgba(0, 0, 0, .1);
}

.box1:hover{
    animation: run 20s infinite;
}

.box1:hover .index{
    display: block;
}

@keyframes run{
    0%{
        border-top: 3px red solid;
        border-bottom: 3px blue solid;
        border-left: 3px yellow solid;
        border-right: 3px brown solid;
        box-shadow: none;
    }

    16.6%{
        border-top: 3px rgba(255, 0, 0, .3) dashed;
        border-bottom: 3px rgba( 0, 0, 255, .3) dashed;
        border-left: 3px rgba(255, 255, 0, .3) dashed;
        border-right: 3px rgba(165, 42, 42, .3) dashed;  
        box-shadow: none;
    }

    33.2%{
        border-top: 3px palevioletred solid;
        border-bottom: 3px blueviolet solid;
        border-left: 3px deeppink solid;
        border-right: 3px lightcoral solid;  
        box-shadow: none;
    }

    49.8%{
        border-top: 8px palevioletred solid;
        border-bottom: 8px blueviolet solid;
        border-left: 8px deeppink solid;
        border-right: 8px lightcoral solid;  
        box-shadow: none;
    }

    66.4%{
        border-top: 10px skyblue solid;
        border-bottom: 10px skyblue dashed;
        border-left: 10px skyblue dashed;
        border-right: 10px skyblue dashed;
        box-shadow: none;
    }

    83.3%{
        border: 5px black solid;
        box-shadow: none;
    }

    100%{
        border: #999 8px solid;
        box-shadow: none;
    }
}

.index{
    display: none;
}

.box2{
    width: 220px;
    height: 200px;
    /* padding-top: 20px; */
    padding-left: 50px;
}

p{
    color:rgb(255, 145, 0);
    padding-left: 60px;
    padding-bottom: 10px;
    font-weight: bold;
    display: block;
    font-size: 30px;
    text-shadow: cadetblue 1px 1px;
}

p:hover{
    font-size: 40px;
    margin-left: 30px;
    transition: 2s;
    text-shadow: cadetblue 5px 5px;
}

span{
    color: brown;
}

input[name="u"]:focus{
    outline: 2px gold solid;
    border: none;
}

input[name="hi"]{
    background-color: sandybrown;
    border: none;
    height: 20px;
    margin-top: 20px;
    margin-right: 10px;
    box-shadow: 2px 2px rgba(0, 0, 0, .1);
}

input[name="hi"]:hover{
    color: brown
}

/* .arrow{
    position: relative;
}

.arrow::after{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom: none;
    border-top-color: rgba(247, 115, 0, 0.836);
    left: 80px;
    top: 30px;
} */

.img-po{
    display: block;
    position: relative;
}

img{
    /* width: 500px; */
    /* height: 500px; */
    position: absolute;
    left: -110px;
    top: -340px;

    /* left: 430px;
    top: 50px; */
    /* border-radius: 50%; */
    z-index: -1;
}

.box1:hover img{
    animation: img-color 14s infinite;
}

@keyframes img-color{
    0%{
        border: green solid 10px;
        box-shadow: 20px 20px rgba(0, 0, 0, .1);
    }

    16.6%{
        border: cyan solid 10px;
        box-shadow: 20px 20px rgba(0, 0, 0, .2);
    }

    33.2%{
        border: purple solid 10px;
        box-shadow: 20px 20px rgba(0, 0, 0, .3);
    }

    49.8%{
        border: red solid 10px;
        box-shadow: 20px 20px rgba(0, 0, 0, .4);
    }

    66.4%{
        border: orange solid 10px;
        box-shadow: 20px 20px rgba(0, 0, 0, .5);
    }

    83.3%{
        border: blue solid 10px;
        box-shadow: 20px 20px rgba(0, 0, 0, .6);
    }

    100%{
        border: yellow solid 10px;
        box-shadow: 20px 20px rgba(0, 0, 0, .7);
    }
}

img:hover{
    width: 600px;
    left: -150px;
    top: -380px;
    transition: all 3s;
}

